@import 'common';
@import 'mixins/button';
@import 'mixins/form';
@import 'mixins/picker';

//
// Pickers
// --------------------------------------------------

// Common styles
// ----------------------
.@{ns}picker {
  &-toggle-wrapper {
    display: inline-block;
    // Clear whitespace.
    vertical-align: middle;
    max-width: 100%;
  }

  &-block {
    display: block;
  }

  &-disabled {
    opacity: 0.3;
  }

  &-toggle &-toggle-placeholder {
    color: @picker-placeholder-color;
  }

  &-has-value &-toggle &-toggle-value {
    color: @picker-selected-value-color;
  }

  &-none {
    padding: @picker-none-padding;
    color: @picker-none-font-color;
    cursor: default;
  }

  &-countable &-toggle-value {
    display: flex;
  }

  &-value-list {
    flex: 0 1 auto;
    .ellipsis-basic;
    .ie-display(block);
    .ie-max-width(100%);
  }

  &-value-count {
    margin: 0 @picker-value-count-margin;
    background: @picker-value-count-background-color;
    color: @picker-value-count-color;
    border-radius: @picker-value-count-border-radius;
    padding: 0 @picker-value-count-padding;
  }

  &-value-separator {
    margin: 0 4px 0 0;
  }
}

.@{ns}picker-toggle {
  .btn(base);

  .@{ns}picker-default & {
    @padding-vertical: @padding-base-vertical - @picker-default-toggle-border-width;
    @padding-horizontal: @padding-base-horizontal - @picker-default-toggle-border-width;

    padding: @padding-vertical @padding-horizontal;
  }

  .@{ns}picker-default:not(.@{ns}picker-disabled) & {
    &:hover,
    &.active {
      border-color: @picker-default-toggle-hover-border-color;
    }
  }

  .@{ns}picker-subtle & {
    .btn-subtle;

    transition: none;

    &.active {
      background-color: @btn-subtle-hover-bg;
      color: @btn-subtle-default-hover-color;
    }
  }
}

// Custom button sizes
.@{ns}picker-toggle-custom.@{ns}btn {
  &-lg {
    .picker-button-caret-lg;
  }

  &-md {
    .picker-button-caret-md;
  }

  &-sm {
    .picker-button-caret-sm;
  }

  &-xs {
    .picker-button-caret-xs;
  }
}

.@{ns}picker-toggle,
.@{ns}picker-toggle-custom {
  .picker-default-toggle;
  .picker-subtle-toggle;

  width: 100%;
  text-align: left;
  .ellipsis;

  &-value {
    display: block;
    .ellipsis;
  }

  .@{ns}picker-cleanable & {
    padding-right: @dropdown-toggle-padding-right + @picker-toggle-clean-width;

    .@{ns}@{date-picker-prefix}&,
    .@{ns}@{date-range-picker-prefix}& {
      padding-right: @dropdown-toggle-padding-right + @picker-toggle-clean-width +
        @picker-item-content-padding-vertical;
    }
  }
}

// Picker clean button
.@{ns}picker-toggle-clean {
  .dropdown-toggle-caret-common(@picker-toggle-clean-right);
  .set-dropdown-caret(~'dropdown');

  background: inherit;
  color: @picker-toggle-clean-color;
  transition: 0.2s color linear;
  // FIXED: IE browser has 1px orange line.
  .ie-width(19px) !important;
  .ie-text-align(center);

  &:hover {
    color: @picker-toggle-clean-hover-color;
  }

  .@{ns}@{date-picker-prefix} &,
  .@{ns}@{date-range-picker-prefix} & {
    right: @picker-toggle-clean-right + @picker-item-content-padding-vertical;
  }
}

// Picker toggle caret
.@{ns}picker-toggle-caret {
  // Extend  Dropdown toggle caret style
  .dropdown-toggle-caret-common;
  .set-dropdown-caret(~'@{ns}picker');

  color: @picker-default-toggle-caret-color;

  // Set default content to @dropdown-caret-content for support [placement="auto*"]
  &::before {
    content: @dropdown-caret-content;
  }
}

// Change the <caret/> & <clean/> vertical position make it align middle.
.@{ns}@{date-picker-prefix},
.@{ns}@{date-range-picker-prefix} {
  &.@{ns}picker-default {
    .@{ns}picker-toggle-caret,
    .@{ns}picker-toggle-clean {
      top: @padding-base-vertical - @picker-default-toggle-border-width;
    }
  }
}

// Picker Menu
.@{ns}picker-menu {
  position: absolute;
  text-align: left;
  z-index: @zindex-picker-menu;
  border-radius: @border-radius-base;
  background-color: @picker-bg;
  box-shadow: @picker-shadow;
  overflow: hidden;
  // Remove transition
  transition: none;

  // Increase z-index when modal opened.
  .@{ns}modal-open & {
    z-index: @zindex-modal + @zindex-picker-toggle;
  }

  // Increase z-index when drawer opened.
  .@{ns}drawer-open & {
    z-index: @zindex-drawer + @zindex-picker-toggle;
  }

  // Select picker menu & Check select picker menu always has 6px gap
  &.@{ns}picker-select-menu,
  &.@{ns}picker-check-menu {
    padding-top: @border-radius-base;
  }

  // Searchbar
  .@{ns}picker-search-bar {
    position: relative;
    padding: (@picker-menu-padding - @border-radius-base) @picker-menu-padding @picker-menu-padding;

    .@{ns}picker-search-bar-input {
      .default-input;

      min-width: @picker-content-min-width;
      padding-right: @picker-search-bar-icon-width +
        (@padding-base-input-horizontal - @input-border-width) * 2;
    }

    &::after {
      content: @picker-search-bar-icon-content;
      font-family: @font-family-icon;
      font-style: normal;
      position: absolute;
      width: @picker-search-bar-icon-width;
      color: @B400;
      font-size: @font-size-base;
      line-height: unit(@line-height-computed / @font-size-base);
      top: @picker-menu-padding - @border-radius-base + @padding-base-input-vertical;
      right: @picker-menu-padding + @padding-base-input-horizontal;

      .@{ns}@{tree-picker-prefix}-menu&,
      .@{ns}@{check-tree-picker-prefix}-menu& {
        top: (@padding-base-input-vertical - @input-border-width);
      }
    }
  }

  /* stylelint-disable-next-line */ // This class name provide by Virtualized.
  .ReactVirtualized__Grid.ReactVirtualized__List:focus {
    outline: none;
  }
}
